<template>
  <div class="native-calendar">
    <!-- 1. 日历头部：年月显示 + 切换按钮 + 今日按钮 -->
    <div class="calendar-header">
      <button @click="prevMonth" class="btn btn-prev">←</button>
      <h3 class="current-date">{{ currentYear }}年{{ currentMonth + 1 }}月</h3>
      <!-- 注意：JS Date 月份是 0-11，显示时需 +1 -->
      <button @click="nextMonth" class="btn btn-next">→</button>
      <button @click="goToday" class="btn btn-today">今日</button>
    </div>

    <!-- 2. 星期标题栏（周一到周日，可按需改为“周日到周六”） -->
    <div class="week-header">
      <div class="week-item" v-for="week in weekList" :key="week">
        {{ week }}
      </div>
    </div>

    <!-- 3. 日期网格（核心：渲染所有日期，含补位） -->
    <div class="date-grid">
      <div class="date-item" v-for="(date, index) in calendarDates" :key="index" :class="{
        'other-month': !date.isCurrentMonth, // 其他月的补位日期（灰色）
        'today': date.isToday, // 今日（特殊颜色）
        'active': date.date === selectedDate // 选中日期（高亮背景）
      }" @click="handleDateClick(date.date)">
        {{ date.date.getDate() }} <!-- 只显示“日”（1-31） -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NativeCalendar",
  data() {
    return {
      currentYear: new Date().getFullYear(), // 当前展示的“年”
      currentMonth: new Date().getMonth(), // 当前展示的“月”（0-11）
      selectedDate: new Date(), // 当前选中的“日期”（默认今日）
      weekList: ["一", "二", "三", "四", "五", "六", "日"], // 星期标题
      calendarDates: [] // 日历所有日期数据（含补位）
    };
  },
  mounted() {
    // 组件初始化时，生成当前月的日历
    this.generateCalendar();
  },
  methods: {
    /**
     * 核心方法：生成当前月的日历数据（含上月/下月补位）
     */
    generateCalendar() {
      const dates = []; // 存储最终的日期数组

      // 1. 获取当前月的第一天和最后一天
      const firstDay = new Date(this.currentYear, this.currentMonth, 1); // 当月1号
      const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0); // 当月最后一天

      // 2. 计算“当月第一天是星期几”（调整：让周一=0，周日=6，方便补位）
      // getDay() 原生返回：周日=0，周一=1...周六=6 → 需转换
      let firstDayWeek = firstDay.getDay() || 7; // 转换后：周一=1，周日=7
      firstDayWeek -= 1; // 最终：周一=0，周日=6

      // 3. 生成“上月的补位日期”（数量 = 当月第一天的星期数）
      // 例：当月第一天是周一（0）→ 补0个；是周二（1）→ 补1个
      for (let i = firstDayWeek; i > 0; i--) {
        // 补位日期 = 当月1号 - i天
        const prevDate = new Date(this.currentYear, this.currentMonth, 1 - i);
        dates.push({
          date: prevDate,
          isCurrentMonth: false, // 不是当前月
          isToday: this.isToday(prevDate) // 是否是今日（需判断）
        });
      }

      // 4. 生成“当月的日期”
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const currentDate = new Date(this.currentYear, this.currentMonth, i);
        dates.push({
          date: currentDate,
          isCurrentMonth: true, // 是当前月
          isToday: this.isToday(currentDate)
        });
      }

      // 5. 生成“下月的补位日期”（凑够 7列×5/6行 = 35/42个日期）
      const totalNeed = dates.length % 7 === 0 ? 0 : 7 - (dates.length % 7);
      for (let i = 1; i <= totalNeed; i++) {
        const nextDate = new Date(this.currentYear, this.currentMonth + 1, i);
        dates.push({
          date: nextDate,
          isCurrentMonth: false,
          isToday: this.isToday(nextDate)
        });
      }

      // 6. 赋值给日历数据，渲染模板
      this.calendarDates = dates;
    },

    /**
     * 辅助方法：判断某个日期是否是“今日”
     * @param {Date} date - 要判断的日期
     * @returns {boolean} 是否是今日
     */
    isToday(date) {
      const today = new Date();
      return (
        date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate()
      );
    },

    /**
     * 交互：切换到上月
     */
    prevMonth() {
      if (this.currentMonth === 0) {
        // 1月 → 上月是12月，年份减1
        this.currentYear -= 1;
        this.currentMonth = 11;
      } else {
        this.currentMonth -= 1;
      }
      this.generateCalendar(); // 重新生成上月日历
    },

    /**
     * 交互：切换到下月
     */
    nextMonth() {
      if (this.currentMonth === 11) {
        // 12月 → 下月是1月，年份加1
        this.currentYear += 1;
        this.currentMonth = 0;
      } else {
        this.currentMonth += 1;
      }
      this.generateCalendar(); // 重新生成下月日历
    },

    /**
     * 交互：跳转今日
     */
    goToday() {
      const today = new Date();
      this.currentYear = today.getFullYear();
      this.currentMonth = today.getMonth();
      this.selectedDate = today; // 选中状态同步到今日
      this.generateCalendar();
    },

    /**
     * 交互：点击日期选中
     * @param {Date} date - 点击的日期
     */
    handleDateClick(date) {
      this.selectedDate = date;
      // 可扩展：向父组件传递选中的日期（如 this.$emit('date-selected', date)）
    }
  }
};
</script>

<style scoped>
/* 日历整体样式 */
.native-calendar {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

/* 头部样式：年月 + 按钮 */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.btn:hover {
  background: #f5f5f5;
}

.btn-today {
  background: #42b983;
  /* Vue 绿：突出今日按钮 */
  color: #fff;
  border-color: #42b983;
}

.btn-today:hover {
  background: #359469;
}

.current-date {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* 星期标题样式 */
.week-header {
  display: flex;
  margin-bottom: 8px;
}

.week-item {
  flex: 1;
  text-align: center;
  font-weight: 500;
  color: #666;
  padding: 8px 0;
}

/* 日期网格样式 */
.date-grid {
  display: flex;
  flex-wrap: wrap;
}

.date-item {
  flex: 1;
  min-width: calc(100% / 7);
  /* 7列均分 */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 其他月的补位日期（灰色） */
.date-item.other-month {
  color: #ccc;
}

/* 今日（蓝色） */
.date-item.today {
  color: #2196f3;
  font-weight: bold;
}

/* 选中日期（高亮背景） */
.date-item.active {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: bold;
}

/* 鼠标悬浮效果（除了补位日期） */
.date-item:not(.other-month):hover {
  background: #f5f5f5;
}
</style>